<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算属性和监听器</title>
</head>

<body>
    <div id="app">
        数学：<input type="text" v-model="mathScore"><br>
        英语：<input type="text" v-model="englishScore"><br>
        <!-- v-model调用函数时不要少了小括号（） -->
        总得分(函数-单项绑定)：<input type="text" v-model="sumScore()"><br>
        <!-- 计算属性后面不需要加小括号 -->
        总得分(计算属性-单项绑定)：<input type="text" v-model="sumScore1"><br>
        总得分(计算属性-双向绑定)：<input type="text" v-model="sumScore2"><br>

        <!-- 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。 -->
        总得分(监听器)：<input type="text" v-model="sumScore3"><br>


    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        /**
         * 1. 函数没有缓存，每次都会调用。
         * 2. 计算属性有缓存，只有当计算属性体内的属性值发生改变之后才会被调用。
         * 3. 函数只支持单项的。
         * 4. 计算属性默认只有getter函数，而没有setter函数，所以只支持单项。
         *      如果想要进行双向，则需要自定义setter函数。
         */
        var vm = new Vue({
            el: '#app',
            data: {
                mathScore: 80,
                englishScore: 90,
                // 利用监听器计算出来的总得分
                sumScore3: 0,
            },
            // 函数
            methods: {
                sumScore: function () {
                    console.log("sumScore函数被调用了。。。")
                    // this 指向的是vm实例
                    // 减0是为了字符串转为数字运算
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },
            },
            // 计算属性
            computed: {
                // 这个是单项绑定，默认只有getter方法。
                sumScore1: function () {
                    // 计算属性有缓存，如果计算属性体内的属性值没有发生改变，则不会发生改变，只要属性值发生改变的时候才会重新计算。
                    console.log("计算属性被调用")
                    return (this.mathScore - 0) + (this.englishScore - 0)
                },

                sumScore2: { // 有了set和get之后就可以进行双向数据绑定
                    // 获取数据
                    get: function () {
                        console.log("sumScore2.get 计算属性被调用")
                        return (this.mathScore - 0) + (this.englishScore - 0)
                    },
                    // 设置数据
                    set: function (newValue) { // newValue 是 sumScore2 更新之后的新值。
                        // 当 sumScore2 这个计算属性值发生改变之后，则会调用这个方法。
                        console.log("sumScore2.set 计算属性被调用")
                        var avgValue = newValue / 2
                        this.mathScore = avgValue
                        this.englishScore = avgValue
                    }
                }
            },
            // 监听器
            watch: {
                // 通过 watch() 选项来监听数学分数，当数学分数更新后回调函数中重新计算总分。
                mathScore: function (newValue, oldValue) {
                    // newValue 更新后的值
                    // oldValue 更新前的值
                    this.sumScore3 = (newValue - 0) + (this.englishScore - 0)
                }
            },
        })
    </script>
</body>

</html>